<template>
  <el-dialog :title="!dataForm.id ? '新增邮寄信息':'更新邮寄信息'" :close-on-click-modal="false" :visible.sync="visible" center fullscreen>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="配镜单号" prop="saleBillId">
            <el-select v-model="dataForm.saleBillId" filterable remote :remote-method="searchSaleBillHandle" @change="infoDetail">
                <el-option v-for="item in saleList" :key="item.id" :label="item.billId" :value="item.billId">
                </el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="会员卡号" prop="customerCard">
            <el-input v-model="dataForm.customerCard">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="顾客姓名" prop="name">
            <el-input v-model="dataForm.name">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="顾客电话" prop="phone1">
            <el-input v-model="dataForm.phone1">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="发件人" prop="expressUser" v-if="dataForm.id">
            <el-input v-model="dataForm.expressUser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="快递公司" prop="expressName" v-if="dataForm.id">
            <el-select v-model="dataForm.expressName">
              <el-option label="中通快递" value="中通快递"></el-option>
              <el-option label="顺丰快递" value="顺丰快递"></el-option>
              <el-option label="邮政快递" value="邮政快递"></el-option>
              <el-option label="圆通快递" value="圆通快递"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="快递单号" prop="expressCode" v-if="dataForm.id">
            <el-input v-model="dataForm.expressCode">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮寄时间" prop="expressTime" v-if="dataForm.id">
            <el-input v-model="dataForm.expressTime">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="省市区">
            <el-form-item prop="provinceCode" label-width="0" style="float: left;">
              <el-select v-model="dataForm.province" placeholder="请选择" @change="changeCity(dataForm.province)">
                <el-option v-for="item in provinces" :key="item.id" :label="item.regionName"
                  :value="item.regionName">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city" label-width="0" style="float: left;">
              <el-select v-model="dataForm.city" placeholder="请选择" @change="changeArea(dataForm.city)">
                <el-option v-for="item in citys" :key="item.id" :label="item.regionName"
                  :value="item.regionName">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="area" label-width="0" style="float: left;">
              <el-select v-model="dataForm.area" placeholder="请选择">
                <el-option v-for="item in areas" :key="item.id" :label="item.regionName"
                  :value="item.regionName">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <div style="clear: both;"></div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="address">
            <el-input type="textarea" v-model="dataForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注" prop="memo">
            <el-input type="textarea" :rows="2" v-model="dataForm.memo">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button v-if="!dataForm.id" type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>新增并保存</el-button>
      <el-button v-else type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>更新并保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { fetchList, getObjByBillId } from "@/api/eims/optician/glassesinfo"
  import { getListByParentId } from '@/api/admin/region'
  import { expressGetObjById, expressIdFixObj, expressIdAddObj } from "@/api/eims/express"

  export default {
    data() {
      return {
        ischeck: false,
        visible: false,
        dataForm: {
          saleBillId: '',
          customerCard: '',
          name: '',
          phone1: '',
          expressUser: '',
          expressName: '',
          expressCode: '',
          expressTime: '',
          fullAddress: '',
          province: '',
          city: '',
          area: '',
          address: '',
          memo: ''
        },
        saleList: [],
        provinces: [],
        citys: [],
        areas: [],
      };
    },
    methods: {
      init(id) {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.dataForm.id = id || 0;
        this.visible = true;

        this.getCityData()
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          if (this.dataForm.id) {
            expressGetObjById(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data;
                let province = this.provinces.find(item => {
                  if(item.regionName == response.data.data.province){
                    return item
                  }
                })
                getListByParentId(province.id).then(result => {
                  this.citys = result.data.data
                  let city = this.citys.find(item => {
                    if(item.regionName == response.data.data.city){
                      return item
                    }
                  })
                  getListByParentId(city.id).then(result1 => {
                    this.areas = result1.data.data
                  })
                })
              }else{
                this.$message.error(response.data.msg)
              }
            });
          }
        });
      },
      // 表单提交
      dataFormSubmit() {
        this.ischeck = true
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            if (!this.dataForm.id) {
              expressIdAddObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.visible = false;
                  this.$emit("refreshDataList");
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
              }).catch(() => {
                  this.ischeck = false
                })
            } else {
              expressIdFixObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.visible = false;
                  this.$emit("refreshDataList");
                }else{
                  this.$message.error(response.data.msg)
                }
              }).catch(() => {
                  this.ischeck = false
                })
            }
          }else{
            this.ischeck = false
          }
        });
      },
      // 生成省级地址列表
      getCityData() {
        var parentId = '86';
        getListByParentId(parentId).then(response => {
          if(response.data.code == '0'){
            this.provinces = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        }).catch(() => {
          alert("省级地址出错了，请联系管理员")
        });
      },
      // 设置市级地区列表
      changeCity: function(val) {
        this.$set(this.dataForm,'city','')
        this.$set(this.dataForm,'area','')
        let province = this.provinces.find(item => {
          if(item.regionName == val){
            return item
          }
        })
        if (this.dataForm.province != "") {
          getListByParentId(province.id).then(response => {
            if(response.data.code == '0'){
              this.citys = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("市级地址出错了，请联系管理员")
          });
        }
      },
      // 设置区级地区列表
      changeArea: function(val) {
        this.$set(this.dataForm,'area','')
        let city = this.citys.find(item => {
          if(item.regionName == val){
            return item
          }
        })
        if (this.dataForm.city != "") {
          getListByParentId(city.id).then(response => {
            if(response.data.code == '0'){
              this.areas = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("区级地址出错了,请联系管理员")
          });
        }
      },
      // 查询配镜单信息
      searchSaleBillHandle(){
        let params1 = {
          current: 1,
          size: 100,
          billId: this.dataForm.billId
        }
        fetchList(params1).then(response => {
          if(response.data.code == '0'){
            this.saleList = response.data.data.records
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 获取配镜单详情信息
      infoDetail(val){
        getObjByBillId(val).then(response => {
          if(response.data.code == '0'){
            this.$set(this.dataForm,'customerCard',response.data.data.customerCard)
            this.$set(this.dataForm,'name',response.data.data.name)
            this.$set(this.dataForm,'phone1',response.data.data.phone1)
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  };
</script>
<style scoped>
</style>
